<template>
    <view class="addJob">
        <view class="content">
            <view class="pageNum mdTitle">
                <text>{{ positions.length }}</text>
                /3
            </view>
            <view class="title">想找什么工作？</view>
            <view class="md4Text mgrey info">添加多个求职期望，可获得更多精准高薪工作</view>
            <!-- 选择条件 -->
            <view class="selection">
                <view class="selectItem" @click="show_state = true;">
                    <view class="name smTitle">求职状态</view>

                    <view class="next">
                        <text class="md4Text">{{state || '请选择'}}</text>
                        <image src="../../static/imgs/right.png" mode=""></image>
                    </view>
                </view>
                <u-picker :show="show_state" :defaultIndex="[stateList[0] && stateList[0].indexOf(state) !== -1 ? stateList[0].indexOf(state) : 0]" :columns="stateList" @confirm="setState" @cancel="show_state = false;">
                </u-picker>

                <view class="selectItem" @click="show_area = true;">
                    <view class="name smTitle">工作城市</view>

                    <view class="next">
                        <text class="md4Text">{{ city ? city + ' ' + dist : '请选择' }}</text>
                        <image src="../../static/imgs/right.png" mode=""></image>
                    </view>
                </view>
                <u-picker :show="show_area" ref="uPicker" keyName="name" :columns="areaList" @confirm="setArea" @change="changeArea" @cancel="show_area = false;"></u-picker>

                <view class="selectItem" v-for="(item,index) in positions" :key="index" @tap="goExpect(index);">
                    <view class="name smTitle">{{item.position}}</view>

                    <view class="next">
                        <text class="md4Text mgrey">{{item.qzlx}}, {{item.salary_min}}-{{item.salary_max}}k</text>
                        <image src="../../static/imgs/right.png" mode=""></image>
                    </view>
                </view>
            </view>
        </view>

        <!-- 继续添加求职期望 -->

        <image src="../../static/imgs/detail/addJob.png" mode="" class="keepAdd" @tap="goExpect(-1);" v-if="positions.length < 3"></image>
        
        <view style="margin-top: 60rpx; padding: 0 52rpx;">
            <u-button type="primary" @click="nextStep()">确定</u-button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show_state: false,
                state: '',
                stateList: [],

                areaList: [],
                area_index: [0,0,0],
                show_area: false,
                prov: '',
                city: '',
                dist: '',
                
                positions: [],
                
                is_resume: false,
            };
        },
        onLoad(options) {
            this.getArea();
            this.getState();
            var resume = uni.getStorageSync('resume');
            if(resume) {
                this.is_resume = true;
                this.state = resume.state;
                this.prov = resume.prov;
                this.city = resume.city;
                this.dist = resume.dist;
                this.positions = resume.positions;
            }
        },
        onShow() {
            var position = uni.getStorageSync('select_resume_position');
            if(position) {
                if(position.index > -1) {
                    var positions = this.positions;
                    position.id = positions[position.index].id;
                    positions[position.index] = position;
                    this.positions = positions;
                    this.$forceUpdate();
                }else if(this.positions.length < 3) {
                    this.positions.push(position);
                }
                uni.removeStorageSync('select_resume_position');
            }
            
            var position_del = uni.getStorageSync('delete_resume_position');
            if(position_del) {
                if(position_del.index > -1) {
                    this.positions.splice(position_del.index, 1);
                    this.$forceUpdate();
                }
                uni.removeStorageSync('delete_resume_position');
            }
        },
        methods: {
            getState() {
                this._ajax({
                    url: '/api/index/getStateList',
                    success: res => {
                        if (res.code == 1) {
                            this.stateList = [res.data];
                        }
                    }
                })
            },
            setState(e) {
                this.show_state = false;
                this.state = e.value[0];
            },
            getArea() {
                this._ajax({
                    url: '/api/index/getAreaTree',
                    success: res => {
                        if (res.code == 1) {
                            this.areaList = [res.data,res.data[0].childs,res.data[0].childs[0].childs];
                        }
                    }
                }, 1);
            },
            setArea(e) {
                this.show_area = false;
                console.log(JSON.stringify(e.value));
                this.prov = e.value[0].name;
                this.city = e.value[1].name;
                this.dist = e.value[2].name;
            },
            changeArea(e) {
                console.log(111);
                const {
                    columnIndex,
                    index,
                    // 微信小程序无法将picker实例传出来，只能通过ref操作
                    picker = this.$refs.uPicker
                } = e;
                console.log(columnIndex, index);
                this.area_index[columnIndex] = index;
                if (columnIndex === 0) {
                    // this.areaList = [this.areaList[0], this.areaList[0][index].childs, this.areaList[0][index].childs[0].childs];
                    picker.setColumnValues(1, this.areaList[0][index].childs);
                    picker.setColumnValues(2, this.areaList[0][index].childs[0].childs);
                }else if(columnIndex === 1) {
                    // this.areaList = [this.areaList[0], this.areaList[1], this.areaList[1][index].childs];
                    picker.setColumnValues(2, this.areaList[0][this.area_index[0]].childs[index].childs);
                }
            },


            goExpect(index) {
                if(index > -1) {
                    uni.setStorageSync('edit_resume_position', this.positions[index]);
                }
                uni.navigateTo({
                    url: '/pages/views/home/addExpect?index=' + index
                })
            },
            nextStep() {
                if(!this.state) {
                    return this._toast('请选择求职状态');
                }
                if(!this.city) {
                    return this._toast('请选择工作城市');
                }
                if(this.positions.length == 0) {
                    return this._toast('请添加求职期望');
                }
                if(this.is_resume) {
                    this._ajax({
                        url: '/api/user/updateResume',
                        data: {
                            state: this.state,
                            prov: this.prov,
                            city: this.city,
                            dist: this.dist,
                            positions: this.positions,
                            step: 3
                        },
                        success: res => {
                            if(res.code == 1) {
                                uni.setStorageSync('resume', res.data);
                                this._toBack();
                            }else{
                                this._toast(res.msg);
                            }
                        }
                    }, 1);
                }else {
                    this._ajax({
                        url: '/api/user/expect',
                        data: {
                            state: this.state,
                            prov: this.prov,
                            city: this.city,
                            dist: this.dist,
                            positions: this.positions
                        },
                        success: res => {
                            if(res.code == 1) {
                                uni.setStorageSync('user', res.data);
                                if(res.data.step == 4) {
                                    this._toView('login/step4');
                                }
                            }else{
                                this._toast(res.msg);
                            }
                        }
                    }, 1);
                }
            }
        }
    };
</script>

<style scoped lang="less">
    .addJob {
        width: 100%;
        background: #ffffff;

        .content {
            width: 100%;
            padding: 0 52upx;
            position: relative;

            .pageNum {
                position: absolute;
                right: 70upx;
                top: 0;

                text {
                    color: #3465b1;
                }
            }

            .title {
                font-size: 40upx;
                margin: 80upx 0 25upx 20upx;
                font-weight: bold;
                letter-spacing: 5upx;
            }

            .info {
                margin-left: 20upx;
            }

            .selection {
                margin-top: 40upx;

                .selectItem {
                    width: 100%;

                    align-items: center;
                    justify-content: space-between;
                    padding-bottom: 25upx;
                    padding-top: 50upx;
                    border-bottom: 2upx solid #e5e5e5;
                    display: flex;

                    .next {
                        image {
                            vertical-align: middle;
                            margin-left: 10upx;
                            width: 48upx;
                            height: 48upx;
                        }
                    }
                }
            }
        }

        .keepAdd {
            display: block;
            width: 612upx;
            height: 112upx;
            margin: 62upx auto;
        }
    }
</style>
